<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="partJobBox">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-tree
            :data="data1"
            show-checkbox
            @check="treeCheckFun"
            :default-expand-all="false"
            :filter-node-method="filterNode"
            :check-strictly="true"
            node-key="id"
            ref="tree"
            :highlight-current='true'
            :props="defaultProps">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple-light">
          <el-table
            height="460"
            :data="myArr"
            style="width: 100%">
            <el-table-column
              label="职位"
              width="400">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.name }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="delFun(scope.row.id, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--<div style="width: 100%;text-align: center;">-->
      <!--<div style="margin-top: 34px;">-->
        <!--<el-button type="primary" @click="savePartJob" size="small">保存</el-button>-->
        <!--<el-button @click="dialogClose" size="small">取消</el-button>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
import { allData, selectedData, saveData } from '@/api/partJob'
export default {
  name: 'partTime',
  props: ['editData'],
  created() {
    //  调用获取全部数据接口获取全部数据
    // allData(this.$store.getters.selectOrgId)
    var a = allData(this.$store.getters.selectOrgId)
    // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}
    // 将接口返回数据进行处理进行渲染
    a.then(result => {
      this.data = result.data.data
      var a = this.data.shift()
      this.data1 = a.children
    })
    // 调用已选中数据接口
    // selectedData()
    if (this.editData.userId != '') {
      var b = selectedData(this.editData.userId)
      //  将选中数据进行处理渲染
      b.then(result => {
        // console.log(result)
        this.xuanzhong = result.data
        for (var i = 0; i < this.xuanzhong.data.length; i++) {
          var b = this.xuanzhong.data[i].id
          this.formDataArr.push(b)
        }
        // 将选中数据进行左右联动绑定
        for (var i = 0; i < this.xuanzhong.data.length; i++) {
          var c = this.xuanzhong.data[i]
          this.myArr.push(c)
        }
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.formDataArr)// 获取已经设置的资源后渲染
        })
      })
    }
  },
  methods: {
    dialogClose() {
      this.$emit('closeD')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    disabledFn(data, node) {
      if (this.editData.orgId == data.id) {
          return true;
      } else {
          return false;
      }
    },
    delFun(id, index) {
      this.myArr.splice(index, 1)
      for (let i = 0; i < this.formDataArr.length; i++) {
        if (this.formDataArr[i] === id) {
          this.formDataArr.splice(i, 1)
          break
        }
      }
      this.tableData = this.tableData.filter(item => item.id !== id)
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.formDataArr)// 获取已经设置的资源后渲染
      })
      this.$emit('changeCloseDialog', this.formDataArr)
    },
    treeCheckFun(val1, val2, id) {
      this.myArr = []
      this.formDataArr = []
      this.tableData1.length = []
      this.tableData = this.$refs.tree.getCheckedNodes()
      this.$refs.tree.getCheckedNodes().forEach((val) => {
        this.formDataArr.push(val.id)
        var qwe = this.$refs.tree.getNode(val.id).key
        this.labelName = this.$refs.tree.getNode(val.id).label
        this.getParentLabel(this.$refs.tree.getNode(val.id))
        this.myArr.push({
          name: this.labelName,
          id: val.id
        })
      })
      this.$emit('changeCloseDialog', this.formDataArr)
    },

    getParentLabel(node) {
      for (let key in node) {
        if (key == 'parent') {
          if (node[key].label != undefined) {
            this.labelName += ' / ' + node[key].label
            this.getParentLabel(node[key])
          } else {

          }
        }
      }
    },
    childNodesChange(node) {
      let len = node.childNodes.length
      for (let i = 0; i < len; i++) {
        node.childNodes[i].checked = false
        this.childNodesChange(node.childNodes[i])
      }
    },
    parentNodesChange(node) {
      if (node.parent) {
        for (let key in node) {
          if (key == 'parent') {
            node[key].checked = true
            this.parentNodesChange(node[key])
          }
        }
      }
    },
    // 将选中的职位保存到缓存区域用于被选中区域的渲染
    getCheckedNodes() {

      this.tableData = this.$refs.tree.getCheckedNodes()
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }])
    },

    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    savePartJob() {
      this.$emit('changeCloseDialog', this.formDataArr)
      // saveData(this.formDataArr)
    }

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      filterText: '',
      myArr: [],
      formDataArr: [],
      data: [],
      data1: [],
      xuanzhong: [],
      xuanzhong1: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: this.disabledFn
      },
      labelName: '',
      tableData: [],
      tableData1: [],
    }
  }
}
</script>

<style>
.partJobBox{
  width: 100%;
  height: 460px;
  overflow-x: scroll;
  overflow-y: auto;
}
.el-tree {
 width: 100%;
  display:inline-block !important;
}
</style>
